<template>
	<view class="center">
		<view class="fixedHeader">
			<view class="back" @click="backPage">
				<image  src="../../static/center/ico-m24-w24-arrow-right.png" mode=""></image>
			</view>
			<view class="logout"  @click="showLogout">
				<image :src="avatarUrl" mode=""></image>
			</view>
		</view>
		<view class="centerHeader">
			<image class="bcgImg" src="https://assets.tapimg.com/web-app/static/img/default_bg.05387bbb.png" mode=""></image>
			<image class="avatar" :src="avatarUrl" mode=""></image>
			<view class="edit">编辑资料</view>
		</view>
		<view class="centerMain">
			<view class="mainHeader">
					<text class="userName">蝴蝶忍</text>
					<view class="userId">
						<view class="left">
							礼仪
						</view>
						<view class="right">
							ID:23772077
						</view>
					</view>
					<view class="userMsg">
						<span>0</span>粉丝&nbsp;·&nbsp;<span>258</span>&nbsp;关注&nbsp;·&nbsp;<span>7</span>收藏
					</view>
				</view>
				<view class="mainTab">
					<view class="tab">
						<view class="item" :class="{'active':isCheck===0}" @click="isCheck=0">
							动态
						</view>
						<view class="item" :class="{'active':isCheck===1}" @click="isCheck=1">
							关于
						</view>
					</view>
					<view class="block" :style="{'left':isCheck===0?'8rpx':'108rpx'}"></view>
				</view>
				<view class="mainBottom">
					<view class="bottomList1">
						<view class="left">
							<view class="top">
								来到TapTap
							</view>
							<view class="bottom">
								总共获得43个赞
							</view>
						</view>
						<view class="right">
							<text class="num">1327</text>
							天
						</view>
					</view>
					<view class="bottomList2">
						<view class="left">
							<image src="../../static/center/game.png" mode=""></image>
							<view class="text">玩过的游戏</view>
						</view>
						<view class="right">
							<view class="text">234 款</view>
							<image src="../../static/center/ico-m24-w24-arrow-right.png" mode=""></image>
						</view>
					</view>
					<view class="bottomList2">
						<view class="left">
							<image src="../../static/center/ico-m28-w28-makeappointment.png" mode=""></image>
							<view class="text">预约的游戏</view>
						</view>
						<view class="right">
							<view class="text">4 个</view>
							<image src="../../static/center/ico-m24-w24-arrow-right.png" mode=""></image>
						</view>
					</view>
					<view class="bottomList2">
						<view class="left">
							<image src="../../static/center/ico-m28-w28-time.png" mode=""></image>
							<view class="text">总共游戏时长</view>
						</view>
						<view class="right">
							<view class="text">1054 小时</view>
							<image src="../../static/center/ico-m24-w24-arrow-right.png" mode=""></image>
						</view>
					</view>
					<view class="bottomList2">
						<view class="left">
							<image src="../../static/center/ico-m28-w28-badge.png" mode=""></image>
							<view class="text">获得的徽章</view>
						</view>
						<view class="right">
							<view class="text">2枚</view>
							<image src="../../static/center/ico-m24-w24-arrow-right.png" mode=""></image>
						</view>
					</view>
					<view class="bottomList2">
						<view class="left">
							<image src="../../static/center/ico-m28-w28-group.png" mode=""></image>
							<view class="text">活跃过的论坛</view>
						</view>
						<view class="right">
							<view class="text">7 个</view>
							<image src="../../static/center/ico-m24-w24-arrow-right.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		<view class="poppup" :style="isShow ? 'opacity:1;height:672rpx;color:#000000;' : ''">
			<view class="popItem" v-for="(item,index) in arr" :key="index">{{item}}</view>
			<view class="popItem" @click="logout">登出</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				isCheck:1,
				isShow:false,
				arr:['个人中心','我的关注','我的收藏','我的订单','浏览历史','我的草稿','切换到Android']
			};
		},
		mounted(){
			// 获取用户信息
			this.userInfo = wx.getStorageSync('userInfo_key')
		},
		methods:{
			backPage(){
				uni.navigateBack()
			},
			// 点击展开或关闭
			showLogout(){
				this.isShow=!this.isShow
			},
			logout(){
				uni.removeStorageSync('userInfo_key')
				wx.reLaunch({
					url:'/pages/index/index'
				})
				wx.showToast({
				  title: '退出登录成功',
				  icon: 'none',
				  duration: 2000
				})
			}
		},
		computed:{
			avatarUrl(){
				return uni.getStorageSync('userInfo_key').avatarUrl
			}
		}
		
	}
</script>

<style lang="stylus">
	.center
		.fixedHeader
			display flex
			width calc(100vw - 64rpx)
			position fixed
			top 24rpx
			right 32rpx
			z-index 99
			justify-content space-between
			.back
				transform: rotate(180deg);
				width 46rpx
				height 46rpx
				background-color rgba(0,0,0,.3)
				border-radius 50%
				overflow hidden
				padding 10rpx
				image
					width 46rpx !important
					height 46rpx !important
			.logout
				width 66rpx
				height 66rpx
				border-radius 50%
				overflow hidden
				image
					width 66rpx !important
					height 66rpx !important
				
		.centerHeader
			width 100%
			position relative
			.bcgImg
				width 100%
				height 375rpx
			.avatar
				position absolute
				bottom -103rpx
				left 36rpx
				width 200rpx
				height 200rpx
				border 8rpx solid #FFFFFF
				border-radius 50%
			.edit
				float right
				color #FFFFFF
				margin 12rpx 32rpx 0 24rpx
				border-radius 32rpx
				height 64rpx
				line-height 64rpx
				font-size 32rpx
				padding 0 32rpx
				background-color #15C5CC
		.centerMain
			padding 0 32rpx
			margin-top 110rpx
			.mainHeader
				.userName
					font 700 36rpx ""
					line-height 52rpx
				.userId
					margin 16rpx 0
					display flex
					.left
						padding 2rpx 8rpx
						color #868C92
						line-height 36rpx
						font 700 24rpx ""
						margin-right 24rpx
						border-radius 8rpx
						border 1rpx solid #D2D7D9
					.right
						color #15C5CC
						font 700 24rpx ""
						line-height 36rpx
						border-radius 8rpx
						border 1px solid #15c5ce
						padding 2rpx 8rpx
				.userMsg
					height 56rpx
					line-height 56rpx
					margin-bottom 16rpx
					font-size 32rpx
					color #868c92
					span
						color #15c5ce
						font 700 32rpx ""
						margin 0 12rpx
			.mainTab
				position relative
				width 100%
				overflow hidden
				height 90rpx
				.tab
					display flex
					align-items center
					font-weight 500
					.item
						padding 22rpx 32rpx 22rpx 0
						font-size 36rpx
						line-height 52rpx
						color #868c92
						&.active
							color #000000
				.block
					position absolute
					transition left 1s
					bottom 0
					left 0
					z-index 1
					width 60rpx
					height 6rpx
					background-color #14b9c8
					border-radius 6rpx
			.mainBottom
				width 100%
				height 480rpx
				.bottomList1
					display flex
					align-items center
					justify-content space-between
					margin 24rpx 0
					.left
						.top
							color #1d2127
							font-size 34rpx
							line-height 52rpx
						.bottom
							color #868c92
							font-size 30rpx
							line-height 48rpx
					.right
						display flex
						font-size 32rpx
						line-height 60rpx
						color #868c92
						.num
							font 700 60rpx ""
							color #15C5CC
							margin-right 24rpx
				.bottomList2
					display flex
					text-align center
					justify-content space-between
					margin 32rpx 0
					.left
						display flex
						align-items center
						image
							width 54rpx
							height 54rpx
							margin-right 16rpx
						.text
							font-size 30rpx
							color #1d2127
					.right
						display flex
						align-items center
						image
							width 48rpx
							height 48rpx
						.text
							color #b9bec1
							font-size 30rpx
							margin-right 16rpx
		.poppup
			position: fixed
			background-color: white
			top: 128rpx
			right 32rpx
			width: calc(100vw - 64rpx)
			border-radius 24rpx
			padding 24rpx 0
			box-shadow: 0 12rpx 64rpx rgba(0,0,0,.3);
			z-index 99
			transition all 1s
			opacity 0
			height 0rpx
			color #ffffff
			.popItem
				padding 18rpx 32rpx
						
				
				
</style>
